<template>
  <div class="app-container">

    <div  style="width: 100vw;display: flex;justify-content: center;margin-top: 20px;padding: 20px;border-radius: 20px;margin-top: 20px" >
      <!--    <div style="background-color: #409eff;width: 100%;display: flex;"></div>-->




      <div  style="width: 60vw;position: relative;" >
        <el-card v-if="goodsdata.goodsPic" >

          <div  style="display: flex" >
            <div style="width: 24vw">
              <div style="width:100%;height: 400px"> <!--pic-box:width:500px;height:500px-->
                <pic-zoom :url="url" :scale="2" scroll="true" style="width:100%;height: 100%">

                </pic-zoom>
              </div>
              <div style="width: 100%;display: flex">
                <div v-for="(item,index) in goodsdata.goodsPic.split(',')" :key="item" class="card-item">
                  <el-image
                      style="width: 4vw; height: 4vw;margin-right: 1vw;margin-top: 20px"
                      :src="item"
                      @mouseenter.native="handleMouseEnter(item)"
                  >
                  </el-image>
                </div>
              </div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;font-size: 20px;position: relative;width: 36vw">
              <div style="text-align: left; font-weight: bolder">
                <span style="font-size: 15px">{{ goodsdata.goodsName }}</span>
              </div>
              <div style="background-color: #f3f3f3;padding: 20px;border-radius: 20px;margin-top: 20px">
                <div style="text-align: left; margin-top: 10px;font-size: 15px">
                  类型：<span>{{ goodsdata.goodsType }}</span>
                </div>

                <div  style="text-align: left; margin-top: 10px;font-size: 15px">
                  价格：<span style="color: red;font-size: 20px">￥{{ goodsdata.goodsPrice }}</span>
                </div>
                <div style="text-align: left; margin-top: 10px;font-size: 15px">
                  库存：<span>{{ goodsdata.goodsNum }}</span>
                </div>
              </div>
              <div style="text-align: left; margin-top: 10px;font-size: 15px;overflow-y: auto;height: 15vh">
                描述：<span>{{ goodsdata.goodsInfo }}</span>
              </div>

              <div style="position: absolute;bottom: 0; right: 20px">
                <el-button  type="danger"  @click="addcart">加入购物车</el-button>
                <el-button type="primary"  @click="buy">购买</el-button>
              </div>


            </div>
          </div>


        </el-card>
        <div style="background-color: white;padding: 20px;border-radius: 20px;margin-top: 20px">
          <comments2 ifre="true" :id="goodsid" table="goods" :type="goodsdata.goodsType"></comments2>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
import {listGoods, getGoods, delGoods, addGoods, updateGoods} from "@/api/project/goods";

import {listCart, getCart, delCart, addCart, updateCart,ifhave} from "@/api/project/cart";

export default {
  name: "index",
  data() {
    return {
      title:"",
      goodsid:"",
      url:"",
      goodsdata:{},
      open:false,
      form: {}
    }
  },
  created() {
    this.goodsid = this.$route.query.id
    this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
    this.chushihua()
  },
  methods: {

    handleMouseEnter(item){
      this.url=item
    },
    addcart(){
      if(!localStorage.getItem("userInfo")){
        this.$message.error("请先登录");
        return
      }

      if(this.goodsdata.goodsNum > 0){
        ifhave({userId:this.userInfo.id,cartGoods:this.goodsid}).then(res1=>{
          if(res1.data.length>0){
            this.msgerror("该商品您已加入购物车！");
          }else {
            addCart({userId:this.userInfo.id,cartGoods:this.goodsid}).then(res=>{
              this.msgsuccess("加入购物车成功！");
            })
          }
        })
      }else {
        this.msgerror("库存不足！");
      }


    },
    buy(){
      if(!localStorage.getItem("userInfo")){
        this.$message.error("请先登录");
        return
      }
      if(this.goodsdata.goodsNum > 0){


        this.$router.push({ path: '/goods/buy', query: { info: JSON.stringify(this.goodsdata) } });



      }else {
        this.msgerror("库存不足！");
      }


    },

    chushihua(){
      getGoods({id:this.goodsid}).then(res=>{
        this.goodsdata=res.data
        this.url=res.data.goodsPic.split(",")[0]

      })
    },

  }
}
</script>

<style scoped>
.app-container{
  background-image: url('../../assets/back.jpg');
  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  min-height: 100vh;
  display: flex;





}
</style>
